Overlapping Dropdown Menu

[tceramesh]

Hi,
I am using auto suggest drop down menu..by using div tags and css.. below that i have navigation bar by using list items..
when i search in auto suggest the results are display behind the navigation bar...
what can i do....anyone help me ..

this is for auto suggest css
 
#auto li{padding:0; margin:0px 0px 0px 15px; border:0; list-style:none; position:absolute;}
 
and this for navigation section:
.groupItem .itemHeader
{
    line-height: 23px;
    background-color:#541C03;
    color: #000;
    padding: 0 0px;
 
    font-weight: bold;
    font-size: 16px;
    height: 23px;
    position: relative;
}
 
.groupItem .itemHeader a
{
    position: absolute;
    right: 30px;
    top: 0px;
    font-weight: normal;
    font-size: 11px;
    text-decoration: none;
}
.cross
{
    position: absolute;
    right: 10px;
    top: 0px;
    font-weight: bold;
    font-size: 11px;
    text-decoration: none;
    cursor:pointer;
}
 
 

[Dormilich]

I don't know, whether the problem is caused by this, but I recommend _always_ defining top/bottom, left/right properties when using position: absolute/relative (like the first two clauses).

[Markus]

Maybe giving the auto-suggest a z-index would help.

[tceramesh]

I don't know, whether the problem is caused by this, but I recommend _always_ defining top/bottom, left/right properties when using position: absolute/relative (like the first two clauses).

Hi,
i applied the properties that u mention... but still i am getting the same problem

[tceramesh]

Maybe giving the auto-suggest a z-index would help.

hi,
u told about z-index, where can i put that ...?? i don't know how to apply that..can u explain ( i saw in w3 schools but still i get confused )

[Dormilich]

hi,
u told about z-index, where can i put that ...?? i don't know how to apply that..can u explain ( i saw in w3 schools but still i get confused )

It's handled like any other property, e.g.

#auto li {
  /* your definitions here */
  z-index: 20;
}
 
.groupitem {
  /* your definitions here */
  z-index: 10;
}

this should force the browser to draw li above/on top of .groupitem (due to the higher z-index).

Basicly z-index is something like stacking height and in the end you look from above to (more or less) overlapping elements having the ones with lower z-indices beneath the other ones.

note: you can even use z-indices in the range of 1000 an more, only question is, whether this is useful or not (there you have to make your own experiences)